<template>
  <t-modal
    title="详情"
    width="950px"
    :visible="visible"
    @cancel="closeModal()"
    wrapClassName="detail-modal-container"
    forceRender
    v-bind="footer"
  >
    <div class="curve-modal-body">
      <a-form-model ref="ruleForm" :model="form">
        <div class="sub-title">基本信息</div>
        <a-divider />
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-model-item label="项目名称">
              <a-input v-model="form.proName" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="投资规模(万元)">
              <a-input v-model="form.roadMoney" disabled></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-model-item label="集团工程技术部分管主任">
              <a-input v-model="form.groupDirector" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="项目状态">
              <a-input v-model="form.proStatusDesc" disabled></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-model-item label="工程类型">
              <a-input v-model="form.engTypeDesc" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="归属公司">
              <a-input v-model="form.companyName" disabled></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-model-item label="计划开工日期">
              <a-input v-model="form.startDate" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="计划交工日期">
              <a-input v-model="form.endDate" disabled></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-model-item label="实际开工日期">
              <a-input v-model="form.realityStartDate" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="实际交工日期">
              <a-input v-model="form.realityEndDate" disabled></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-model-item label="项目管理负责人">
              <a-input v-model="form.contacts" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系方式">
              <a-input v-model="form.contactsPhone" disabled></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item label="项目所在地">
          <a-row :gutter="20">
            <a-col :span="12">
              <a-select v-model="form.provinceCode" disabled>
                <a-select-option
                  :value="item.code"
                  v-for="(item, index) in provinceSource"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-col>
            <a-col :span="12">
              <a-select v-model="form.cityCode" disabled>
                <a-select-option
                  :value="item.code"
                  v-for="(item, index) in citySource"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-model-item label="项目流程">
              <a-select v-model="form.flowChart" disabled>
                <a-select-option
                  :value="item.remark"
                  v-for="(item, index) in flowSource"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="集团战略投资部分管主任">
              <a-input v-model="form.strategicInvestmentDirector" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item label="详细地址">
          <a-input v-model="form.address" disabled></a-input>
        </a-form-model-item>
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-model-item label="区位">
              <a-input v-model="form.workAreaDesc" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-model-item label="建设单位">
              <a-input v-model="form.constructionUnit" disabled></a-input>
            </a-form-model-item>
          </a-col> -->
        </a-row>

        <a-form-model-item label="项目简介">
          <a-textarea
            v-model="form.introduction"
            disabled
            :auto-size="{ minRows: 3 }"
          />
        </a-form-model-item>
        <a-form-model-item label="图片">
          <div class="images-list">
            <div class="img" v-for="(item, index) in fileList" :key="index">
              <ViewerImg :toolbar="false" :title="false">
                <img :src="item.url" alt="暂无图片" />
              </ViewerImg>
            </div>
          </div>
        </a-form-model-item>
        <div class="sub-title">其他信息</div>
        <a-divider />

        <a-row :gutter="0">
          <a-col :span="12">
            <a-form-model-item label="项目级别">
              <a-select v-model="form.projectLevel" disabled>
                <a-select-option
                  :value="item.dicItemCode"
                  v-for="item in levelSoucer"
                  :key="item.dicItemCode"
                >
                  {{ item.dicItemName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="资金来源">
              <a-select v-model="form.fundingSource" disabled>
                <a-select-option
                  :value="item.dicItemCode"
                  v-for="item in fundingSource"
                  :key="item.dicItemCode"
                >
                  {{ item.dicItemName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>

            <!-- <a-form-model-item label="建设性质">
              <a-select v-model="form.constructionNature" disabled>
                <a-select-option
                  :value="item.dicItemCode"
                  v-for="item in natureSoucer"
                  :key="item.dicItemCode"
                >
                  {{ item.dicItemName }}
                </a-select-option>
              </a-select>
            </a-form-model-item> -->
          </a-col>
        </a-row>

        <a-row :gutter="0">
          <a-col :span="12">
            <a-form-model-item label="项目单位">
              <a-select v-model="form.projectUnit" disabled>
                <a-select-option
                  :value="item.dicItemCode"
                  v-for="item in unitSoucer"
                  :key="item.dicItemCode"
                >
                  {{ item.dicItemName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="管理部门">
              <a-select v-model="form.managementDepartment" disabled>
                <a-select-option
                  :value="item.dicItemCode"
                  v-for="item in departmentSource"
                  :key="item.dicItemCode"
                >
                  {{ item.dicItemName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item label="建设规模">
          <a-textarea
            v-model.trim="form.constructionScale"
            :rows="4"
            disabled
          />
        </a-form-model-item>
        <div class="sub-title">标段</div>
        <a-divider />
        <vxe-table
          ref="xTable"
          align="center"
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="orgTypeDesc" title="标段类型"> </vxe-column>
          <vxe-column field="orgName" title="标段名称"> </vxe-column>
          <vxe-column field="remark" title="承包单位"> </vxe-column>
          <vxe-column field="orgPerson" title="联系人"> </vxe-column>
          <vxe-column field="orgTelephone" title="联系方式"> </vxe-column>
        </vxe-table>
      </a-form-model>
    </div>
  </t-modal>
</template>

<script>
import { axios } from "@/utils/request";
import areaData from "@/components/_utils/area-json.js";
import ViewerImg from "@/components/TopVUI/custom/ViewerImg";
import { getDicItemByCode } from "@/api/common.js";
export default {
  components: {
    ViewerImg,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    parameter: {
      type: Object,
      default: () => {
        return {};
      },
    },
    footer: {
      type: Object,
      default() {
        return {
          footer: null,
        };
      },
    },
  },
  data() {
    return {
      form: {},
      tableData: [],
      //省市区
      provinceSource: areaData,
      citySource: [],
      //图片
      fileList: [],
      //项目流程
      flowSource: [],
      //项目级别
      levelSoucer: [],
      //建设性质
      natureSoucer: [],
      //项目单位
      unitSoucer: [],
      //资金来源
      fundingSource: [],
      //管理部门
      departmentSource: [],
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    async getData() {
      await this.getProjectFlow();
      //获取项目等级
      this.levelSoucer = await this.getDicCodeDate("projectLevel");
      //获取建设性质
      this.natureSoucer = await this.getDicCodeDate("constructionNature");
      //获取项目单位
      this.unitSoucer = await this.getDicCodeDate("projectUnit");
      //获取资金来源
      this.fundingSource = await this.getDicCodeDate("fundingSource");
      //获取管理部门
      this.departmentSource = await this.getDicCodeDate("managementDepartment");
      ///获取详情
      await this.getOverviewData();
    },
    getProjectFlow() {
      axios
        .post(
          "/probusiness/projectProcess/getListByStatus?status=2",
          {},
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          this.flowSource = res?.data ?? [];
        })
        .catch((_) => {
          this.flowSource = [];
        })
        .finally((_) => {});
    },

    //查询字典表
    getDicCodeDate(dicCode = "") {
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: dicCode })
          .then((res) => {
            let { data } = res;
            resolve(data);
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },

    getUrl(data = "[]") {
      return JSON.parse(data)?.[0]?.url ?? "";
    },
    getOverviewData() {
      let { proCode } = this.parameter;
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/mdata/sysProject/queryProByProCode?proCode=${proCode}`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.form = res ?? {};
            this.tableData = this.form?.unitList ?? [];
            this.fileList = JSON.parse(this.form?.proImage ?? "[]");
            if (this.form.provinceCode) {
              this.citySource =
                this.provinceSource.find(
                  (item) => item.code == this.form.provinceCode
                )?.children || [];
            }
            resolve();
          })
          .catch((_) => {
            this.form = {};
            this.tableData = [];
            reject();
          });
      });
    },

    //关闭
    closeModal() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.detail-modal-container {
  .ant-modal-body {
    padding: 0 !important;
  }
  .curve-modal-body {
    padding: 14px;
    box-sizing: border-box;
    max-height: 700px;
    overflow: hidden;
    overflow-y: auto;
  }
  .ant-divider {
    margin: 10px 0;
  }
  .sub-title {
    font-size: 16px !important;
    font-weight: 700;
    font-size: 18px;
    color: #111111;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ant-form-item {
    display: flex;
    .ant-form-item-label {
      flex-shrink: 0;
      width: 100px;
      white-space: pre-wrap;
      display: flex;
      justify-content: flex-end;
      line-height: 20px;
      margin-right: 2px;
      align-items: center;
      height: 36px;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
  .images-list {
    display: flex;
    flex-wrap: wrap;
    .img {
      width: 104px;
      height: 104px;
      box-sizing: border-box;
      padding: 8px;
      margin: 0 8px 8px 0;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      div {
        height: 100%;
      }
      img {
        height: 100%;
        width: 100%;
      }
    }
  }
}
</style>
